<template>
  <div class="desc-title">基本信息</div>
  <el-descriptions :column="4">
    <el-descriptions-item label="客户全称" :width="descItemWidth"
      >{{ infoDetail.fullname || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="法定代表人" :width="descItemWidth">
      {{ infoDetail.legalPerson || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="注册资本" :width="descItemWidth">
      {{ infoDetail.regCap || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="企业类型" :width="descItemWidth">
      {{ infoDetail.regType || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="社会信用代码" :width="descItemWidth">
      {{ infoDetail.taxNo || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="经营状态" :width="descItemWidth">
      {{ infoDetail.runningStatus || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="企业注册号" :width="descItemWidth">
      {{ infoDetail.regCode || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="成立日期" :width="descItemWidth">
      {{ infoDetail.regDate || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="注销日期" :width="descItemWidth"
      >{{ infoDetail.oppsBackground || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="所属工商局" :width="descItemWidth50">
      {{ infoDetail.govBelong || '-' }}
    </el-descriptions-item>
  </el-descriptions>
  <el-descriptions>
    <el-descriptions-item label="注册地址" :width="descItemWidth50">
      <el-tooltip effect="light" :content="infoDetail.regAddress" placement="bottom">
        {{ infoDetail.regAddress || '-' }}
      </el-tooltip>
    </el-descriptions-item>
  </el-descriptions>
  <el-descriptions :column="1">
    <el-descriptions-item label="经营范围">
      <div class="descriptions">
        <div class="descriptions">
          <div class="descriptions-companyScope">
            {{ infoDetail.companyScope || '-' }}
          </div>
          <span
            @mouseover="e => (buttonRef = e.currentTarget)"
            @click="visible = !visible"
            class="descriptions-companyScope-look"
            >查看全部</span
          >
        </div>

        <el-tooltip
          ref="tooltipRef"
          :visible="visible"
          :virtual-ref="buttonRef"
          virtual-triggering
          popper-class="el-tooltip__popper-myclients-detail"
        >
          <template #content>
            <span> {{ infoDetail.companyScope || '-' }} </span>
          </template>
        </el-tooltip>
      </div>
    </el-descriptions-item>
  </el-descriptions>
  <el-divider />
  <div class="desc-title">客户联系</div>
  <el-descriptions :column="4">
    <el-descriptions-item label="客户分类" :width="descItemWidth">
      <dc-dict type="text" :options="DC_CRM_CUS_CATEGORY" :value="infoDetail.cusCategory" />
    </el-descriptions-item>
    <el-descriptions-item label="人员规模" :width="descItemWidth">
      <dc-dict type="text" :options="DC_CRM_CUS_STAFF_SIZE" :value="infoDetail.staffSize" />
    </el-descriptions-item>
    <el-descriptions-item label="客户级别" :width="descItemWidth">
      <dc-dict type="text" :options="DC_CRM_CUS_LEVEL" :value="infoDetail.cusLevel" />
    </el-descriptions-item>
    <el-descriptions-item label="负责人" :width="descItemWidth">
      <dc-view v-model="infoDetail.personInChargeUser" objectName="user" showKey="realName" />
    </el-descriptions-item>
    <el-descriptions-item label="共享方式" :width="descItemWidth">
      <dc-dict type="text" :options="DC_CRM_CUS_SHARE_TYPE" :value="infoDetail.cusShareType" />
    </el-descriptions-item>
    <el-descriptions-item label="共享人" :width="descItemWidth">
      <dc-view v-model="infoDetail.sharerUser" objectName="user" showKey="realName" />
    </el-descriptions-item>

    <el-descriptions-item label="客户类别" :width="descItemWidth">
      <dc-dict type="text" :options="DC_CRM_SECTOR" :value="infoDetail.sector" />
    </el-descriptions-item>
    <el-descriptions-item label="客户描述" :width="descItemWidth100">
      {{ infoDetail.customerDesc || '-' }}
    </el-descriptions-item>
  </el-descriptions>
  <el-divider />
  <div class="desc-title">相关附件</div>
  <el-descriptions :column="1">
    <el-descriptions-item label="相关附件" :width="descItemWidth100">
      <dc-upload
        v-model="infoDetail.attachments"
        :limit="10"
        :isUpload="false"
        :isRemove="false"
        :targetType="Const.targetType.CUSTOMER"
      />
    </el-descriptions-item>
  </el-descriptions>
  <el-divider />
  <div class="desc-title">系统信息</div>
  <el-descriptions :column="4">
    <el-descriptions-item label="登记人" :width="descItemWidth">
      <dc-view v-model="infoDetail.createUser" objectName="user" showKey="realName" />
    </el-descriptions-item>
    <el-descriptions-item label="修改人" :width="descItemWidth">
      <dc-view v-model="infoDetail.updateUser" objectName="user" showKey="realName" />
    </el-descriptions-item>
    <el-descriptions-item label="登记时间" :width="descItemWidth">
      {{ infoDetail.createTime || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="修改时间" :width="descItemWidth">
      {{ infoDetail.updateTime || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="登记人部门" :width="descItemWidth">
      <dc-view v-model="infoDetail.createDept" objectName="dept" />
    </el-descriptions-item>
    <el-descriptions-item label="修改人部门" :width="descItemWidth">
      <dc-view v-model="infoDetail.updateDept" objectName="dept" />
    </el-descriptions-item>
    <el-descriptions-item label="客户类别" :width="descItemWidth">
      <dc-dict type="text" :options="DC_CRM_SECTOR" :value="infoDetail.sector" />
    </el-descriptions-item>
  </el-descriptions>
</template>
<script setup name="ClientDetail">
import { reactive, ref } from 'vue';
import Const from '@/const';

const buttonRef = ref();
const tooltipRef = ref();

const visible = ref(false);

const props = defineProps({
  infoDetail: {},
});

const { proxy } = getCurrentInstance();

const data = reactive({
  descItemWidth: '25%',
  descItemWidth50: '50%',
  descItemWidth100: '100%',
});

// 数据字典
const {
  DC_CRM_CUS_CATEGORY,
  DC_CRM_CUS_STAFF_SIZE,
  DC_CRM_CUS_LEVEL,
  DC_CRM_CUS_SHARE_TYPE,
  DC_CRM_SECTOR,
} = proxy.useCache([
  { key: 'DC_CRM_CUS_CATEGORY' },
  { key: 'DC_CRM_CUS_STAFF_SIZE' },
  { key: 'DC_CRM_CUS_LEVEL' },
  { key: 'DC_CRM_CUS_SHARE_TYPE' },
  { key: 'DC_CRM_SECTOR' },
]);

const { descItemWidth, descItemWidth50, descItemWidth100 } = toRefs(data);
</script>
<style lang="scss" scoped>
:deep(.el-popper .is-dark .el-tooltip__popper) {
  width: 60% !important; /* 设置宽度 */
}
.desc-title {
  margin: 20px 0;
  font-weight: 600;
  font-size: 16px;
  color: #333;
  line-height: 16px;
  text-align: left;
  font-style: normal;
  text-transform: none;

  &::before {
    margin-right: 4px;
    display: inline-block;
    content: '';
    background: #f78431;
    width: 4px;
    height: 13px;
  }
}

.descriptions {
  display: flex;

  .descriptions-companyScope {
    width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .descriptions-companyScope-look {
    font-weight: 400;
    font-size: 14px;
    color: #f78431;
  }
}
</style>
